import React , { createContext } from "react";
import { MenuContext } from './menu';
import classNames from 'classnames';

export interface MenuItemProps {
    index?: number,
    disabled?: boolean,
    className?: string,
    style?: React.CSSProperties, 
}; 


const MenuItem:React.FC<MenuItemProps> = (props)=>{
    const {
        index , 
        className, 
        disabled, 
        style,
        children,
        ...restProps
    } = props; 
    
    const context = React.useContext(MenuContext);

    const handleClick = ()=>{
        if ( (context.onSelect && !disabled) ){
            context.onSelect(index as unknown as string);
        }
    };

    const classes = classNames('menuItem', className ,{ 
        'is-disabled':disabled,
        'is-active': index === Number(context.index),
    });



    return (
        <li onClick={handleClick} style={style} className={classes} {...restProps}>
            {children} 
        </li>
    );
};


MenuItem.displayName = 'MenuItem';

MenuItem.defaultProps = {    
    
}

export default MenuItem;